<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>本地JSON实现商品列表</title>
    <style>
        .plist{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            width: 80%;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <!-- HTML -->
    <ul class="plist"> 
       
    </ul>
    <script>
        var products=[{
            name:"猜你喜欢",
            img:"./img/300.webp",
            des:"普通朋友-陶喆"

        },{name:"你的歌单补给站",
            img:"./img/301.webp",
            des:"听歌都会哭的人"},
            {
            name:"听「周鹏霄」的也在听",
            img:"./img/303.webp",
            des:"告白气球-周杰伦"
            }];
            //选择ul
            var plist=document.querySelector(".plist");
            //解析JSON数据products
            for(var i=0;i<products.length;i++){
                //创建li新结点
                var productItem=document.createElement("li");
                //给li结点内部内容
                productItem.innerHTML=`
                <h3>${products[i].name}</h3>
                <img src="${products[i].img}">
                
                <p>${products[i].des}</p>
                `;

                //将新节点尾增到plist
                plist.appendChild(productItem);
            }
    </script>
    
</body>
</html>